import { useEffect, useState } from 'react'
import './CategorySelect.less'
import { Input, Button, Select, Col, Form, Row, message } from 'antd';
import { reqGetStuInfo, } from '@/api';

const { Option } = Select;

interface ISearchInfo {
  stuName: string,
  stuID: number,
  stuPwd: string,
  stuAccount: string,
  school: string,
  stuClass: string,
  address: string,
  phone: number,
  time: string
}

interface IProps {
  searchInfo: ISearchInfo[],
  getUpdateInfo: any
}

function CategorySelect(props:IProps) {
  const {searchInfo, getUpdateInfo} = props
  // props 里面就是数组
  const [componentDisabled, setComponentDisabled] = useState(false);
  const [stuName, setStuName] = useState('')
  const [stuAccount, setStuAccount] = useState('')
  const [form] = Form.useForm();
  // 获取查询结果
  const searchStu = (values:any) => {
    if (values.stuName || values.stuAccount){
      reqGetStuInfo(values).then(res => {
        const {code, msg, data} = res.data
        console.log(msg);
        
        if(code === 200) {
          if (msg === '查询成功') {
            getUpdateInfo(data)
            message.success(msg)
          }else if (msg === '查询信息有误') {
            message.error(msg)
          } 
        }
      })
    } else {
      message.error('请输入查询信息')
      resetData()
    }
  }
  // 获取input内的stuName
  const handleStuName = (e:any) => {
    const value = e.target.defaultValue
    setStuName(value);
  };
  // 获取input内的stuAccount
  const handleStuAccount = (e:any) => {
    const value = e.target.defaultValue
    setStuAccount(value);
  };
  // 设置渲染options的条件
  const getFields = () => {
    const childrens = [];
  
    for (let i = 0; i < searchInfo.length ; i++) {
      if (!stuName || !stuAccount) {
        if(searchInfo[i]?.stuName == stuName || searchInfo[i]?.stuAccount == stuAccount) {
          childrens.push(<Option key={searchInfo[i]?.school}>{searchInfo[i]?.school}</Option>)
        }
      } else if(stuName && stuAccount) {
        if(searchInfo[i]?.stuName == stuName && searchInfo[i]?.stuAccount == stuAccount) {
          childrens.push(<Option key={searchInfo[i]?.school}>{searchInfo[i]?.school}</Option>)
        }
      }
    }
    return childrens
  }
  // 使options配合input内容完成联动效果
  useEffect(() => {
    getFields()
  },[]);
  // 重置/查询条件为空时重新获取数据
  const resetData = () => {
    reqGetStuInfo().then(res => {
      const {code,data} = res.data
      if(code === 200) {
        getUpdateInfo(data)
      }
    })
    form.resetFields()
    setStuName('');
    setStuAccount('');
  }
  return (
    <div className='categorySelect'>
      <Form  
        form={form}
        name="search"
        className="search-form"
        onFinish={searchStu}
        disabled={componentDisabled}
      >
        <Row gutter={24}>
          <Col span={4} >
            <Form.Item
              name={'stuName'}
              label={'学生姓名'}
            >
              <Input size='large' value={stuName} onBlur={handleStuName}/>
            </Form.Item>
          </Col>
          <Col span={5} >
            <Form.Item
              name={'stuAccount'}
              label={'学生账号'}
            >
              <Input size='large' value={stuAccount} onBlur={handleStuAccount}/>
            </Form.Item>
          </Col>
          <Col span={6} >
            <Form.Item
              name={'school'}
              label={'所属学校'}
            >
              <Select
                size='large'
                showSearch
                optionFilterProp="children"
              >
                {getFields()}
              </Select>
            </Form.Item>
          </Col>
          <Col span={3} >
            <div className='isUsed'>
              是否启用：
              <span className={componentDisabled?"":"canUse"} onClick={() => {
                setComponentDisabled(false);
              }}>启用</span>
              <span className={!componentDisabled?"":"canUse"} onClick={() => {
                setComponentDisabled(true);
              }}>禁用</span>
            </div>
          </Col>
          <Col span={5} style={{ textAlign: 'right'}} >
            <Button size='large' type="primary" htmlType="submit" > 查询 </Button>
            <Button size='large' style={{ margin: '0 8px' }}
              onClick={resetData}
            >
              重置
            </Button>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default CategorySelect


